<template>
  <div class="app-container">

    <div class="app-container__section">
      <PlusSearch
        v-bind="getSearchBinds()"
        :columns="columns"
        v-model="searchForm"
      />
    </div>

    <div class="app-container__section">
      <PlusTable
        v-bind="getBinds()"
        :columns="columns"
      >
        <template #title>
          <table-title />
        </template>
        <template #toolbar>
          <el-button type="danger" plain icon="Delete" :disabled="gSelection.length === 0" @click="handleDelete" v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
          <el-button type="danger" plain icon="Delete" @click="handleClean" v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
          <el-button type="primary" plain icon="Unlock" :disabled="gSelection.length !== 1" @click="handleUnlock" v-hasPermi="['monitor:logininfor:unlock']">解锁</el-button>
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['monitor:logininfor:export']">导出</el-button>
          <ClockTimer :task="gGetList"/>
          <SearchAreaControl v-model="gShowSearchForm"/>
        </template>
        <template  #plus-cell-status="scope">
          <dict-tag :options="sys_common_status" :value="scope.row.status" />
        </template>

      </PlusTable>
    </div>

  </div>
</template>

<script setup name="Logininfor">
import { list, delLogininfor, cleanLogininfor, unlockLogininfor } from '@/api/monitor/logininfor'
import { PlusSearch, PlusTable } from 'plus-pro-components'
import { useTablePage } from '@/hooks/useTablePage.js'
import { formatRangeTime } from '@/utils/index.js'

const { proxy } = getCurrentInstance()
const { sys_common_status } = proxy.useDict('sys_common_status')

const columns = computed(() => [
  {
    label: "访问编号",
    prop: "infoId",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "用户账号",
    prop: "userName",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "地址",
    prop: "ipaddr",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "登录地点",
    prop: "loginLocation",
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "操作系统",
    prop: "os",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "浏览器",
    prop: "browser",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "登录状态",
    prop: "status",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "描述",
    prop: "msg",
    hideInSearch: true,
    tableColumnProps: {
      align: "center"
    }
  },
  {
    label: "访问时间",
    prop: "loginTime",
    tableColumnProps: {
      align: "center"
    },
    valueType:'date-picker',
    fieldProps: {
      type: 'daterange',
      valueFormat: "YYYY-MM-DD"
    },
    render: val=> proxy.parseTime(val)
  },
]);

// 搜索条件
const searchForm = ref({})

const {
  gRouteMeta,
  gTableData,
  gTotal,
  gLoadingStatus,
  gPageInfo,
  gReset,
  gGetList,
  gOnPageChange,
  gSelection,
  gOnSelectionChange,
  gShowSearchForm,
  gResetForm,
  gResetPage,
  getBinds,
  getSearchBinds
} = useTablePage(list, {
  searchForm,
  beforeRequest(query) {
    let { loginTime, ...rest } = query;
    let timeRange = formatRangeTime(loginTime,undefined,'YYYY-MM-DD')
    return {
      ...rest,
      params:timeRange
    }
  }
})



const defaultSort = ref({ prop: 'loginTime', order: 'descending' })

/** 排序触发事件 */
function handleSortChange(column, prop, order) {
  searchForm.value.orderByColumn = column.prop
  searchForm.value.isAsc = column.order
  gGetList()
}
/** 删除按钮操作 */
function handleDelete(row) {
  const infoIds = row.infoId || gSelection.value.map(item => item.infoId).join(',')
  proxy.$modal
    .confirm('是否确认删除访问编号为"' + infoIds + '"的数据项?')
    .then(function () {
      return delLogininfor(infoIds)
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
/** 清空按钮操作 */
function handleClean() {
  proxy.$modal
    .confirm('是否确认清空所有登录日志数据项?')
    .then(function () {
      return cleanLogininfor()
    })
    .then(() => {
      gGetList()
      proxy.$modal.msgSuccess('清空成功')
    })
    .catch(() => {})
}
/** 解锁按钮操作 */
function handleUnlock() {
  const username = selectName.value
  proxy.$modal
    .confirm('是否确认解锁用户"' + username + '"数据项?')
    .then(function () {
      return unlockLogininfor(username)
    })
    .then(() => {
      proxy.$modal.msgSuccess('用户' + username + '解锁成功')
    })
    .catch(() => {})
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    'monitor/logininfor/export',
    {
      ...searchForm.value
    },
    `logininfor_${new Date().getTime()}.xlsx`
  )
}

</script>
